<body>
<div id="c">加载中...</div>
</body>
<script>
// 预加载图片
// 回调版本
// function loadImage(url, callback) {
//   const img = document.createElement('img')
//   img.src = url
//   img.onload = () => { callback(undefined, img)}
//   img.onerror = (e) => {callback(new Error(`图片载入失败(${url})`))}
// }

// loadImage('./images/all1.gif', function(error, img) {
//   document.querySelector('#c').innerHTML = ''
//   if (error) {
//     document.querySelector('#c').innerHTML = error.message
//   }else {
//     document.querySelector('#c').append(img)
//   }
// })
// Promise函数
function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img')
    img.src = url
    img.onload = () => { resolve(img)}
    img.onerror = (e) => {reject(new Error(`图片载入失败(${url})`))}
  })
}

loadImage('./images/all1.gif')
.then(img => {
  document.querySelector('#c').innerHTML = ''
  document.querySelector('#c').append(img)
})
.then(() => loadImage('./images/all2.gif'))
.then(img => document.querySelector('#c').append(img))
.catch(e => {
  document.querySelector('#c').innerHTML = ''
  document.querySelector('#c').innerHTML = e.message
})
</script>